<template>
  <el-col class="com_class">
    <el-col class="title">会员列表</el-col>
    <el-col style="padding-top: 10px">&nbsp;</el-col>
    <el-form :inline="true" size="mini" label-width="80px" class="forms">
      <el-form-item>
        <el-button type="success" @click="userType(0)">普通会员</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="userType(1)">充值会员</el-button>
      </el-form-item>
    </el-form>
    <el-form
      :model="form"
      ref="form"
      :inline="true"
      size="mini"
      label-width="80px"
      class="forms"
    >
      <el-form-item label="查询用户">
        <el-input v-model="form.key" label></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="class_list"
      border
      show-summary
      :summary-method="getSummaries"
      stripe
      size="small"
    >
      <el-table-column type="index" width="50"></el-table-column>
      <!-- <el-table-column label="购买者" width="120">
        <template slot-scope="scope">{{scope.row.userInfo.nickName}}</template>
      </el-table-column>-->

      <el-table-column
        v-for="col in columns"
        :prop="col.id"
        :key="col.id"
        :label="col.label"
        :width="col.width"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <!-- <el-table-column label="配送方式" width="100">
        <template slot-scope="scope">
          <template v-if="scope.row.delivery==1">商家配送</template>
          <template v-if="scope.row.delivery==2">用户自提</template>
        </template>
      </el-table-column>-->
      <!-- <el-table-column label="商品状态" width="120">
        <template slot-scope="scope">
          <template v-if="scope.row.pay_status==1">待付款</template>
          <template v-if="scope.row.pay_status==3">待发货</template>
          <template v-if="scope.row.pay_status==4">待收货</template>
          <template v-if="scope.row.pay_status==5">已完成</template>
        </template>
      </el-table-column>-->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="editRow(scope.$index, scope.row)"
            type="danger"
            plain
            size="mini"
          >
            编辑用户
            <i class="el-icon-edit"></i>
          </el-button>
          <!-- <template v-if="scope.row.pay_status==3">
            <el-button
              @click.native.prevent="ship(scope.$index,scope.row)"
              type="primary"
              plain
              size="mini"
            >
              发货
              <i class="el-icon-s-promotion"></i>
            </el-button>
          </template>-->
        </template>
      </el-table-column>

      <el-table-column
        prop="total1"
        label="合计"
        align="center"
      ></el-table-column>
    </el-table>
    <el-col class="class_bottom">
      <!-- <el-button type="primary" @click="add_class" size="mini">添加地址</el-button> -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="15"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
    </el-col>
    <el-dialog
      title="修改用户类别"
      :visible.sync="addclass"
      width="450px"
      @close="end"
      :modal-append-to-body="false"
      class="order_detail"
    >
      <el-form
        :model="edituser"
        ref="form"
        label-width="80px"
        size="mini"
        style="text-align: left"
      >
        <el-form-item label="用户类别">
          <el-select v-model="edituser.type" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
          <!-- <el-input v-model=""></el-input> -->
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="eidtuserfn">立即修改</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-col>
</template>
<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: "120px",
      class_list: [],
      addclass: false,
      editclass: false,
      total: 0,
      page: 1,
      user_type: 0,
      form: {
        key: "", //用户名查
      },
      columns: [
        {
          id: "nickName",
          label: "微信昵称",
        },
        {
          id: "typeName",
          label: "用户类别",
        },
        {
          id: "city",
          label: "城市",
        },
        {
          id: "balance",
          label: "余额",
        },
      ],
      orderdetalis: {},
      cotent_list: [],
      post_id: "",
      edituser: {
        type: "",
        user_id: "",
      },
      options: [],
    };
  },
  mounted() {
    this.getlist();
  },
  methods: {
    userType(type) {
      this.user_type = type;
      this.getlist();
    },
    async getlist() {
      //获取列表
      let data = {
        page: this.page,
        user_type: this.user_type,
        key: this.form.key,
      };
      let res = await this.$store.dispatch("usertlist", data);
      if (!res.code) {
        this.class_list = res.data.data;
        this.total = res.data.total;
      }
    },
    onSubmit() {
      this.page = 1;
      this.getlist();
    },
    async eidtuserfn() {
      //   this.edituser.user_id = data;
      let res = await this.$store.dispatch("edit_user", this.edituser);
      if (!res.code) {
        this.$message({
          type: "success",
          message: "修改成功",
        });
        this.getlist();
        this.end();
      }
    },
    getSummaries(param) {
      const { columns, data } = param; //这里可以看出，自定义函数会传入每一列，以及数据
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总计";
          return;
        } else if (index == 4) {
          const values = data.map((item) => Number(item[column.property]));
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          return sums[index];
        } else {
          sums[index] = " ";
        }
      });
      return sums; //最后返回合计行的数据
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this.getlist();
    },
    async editRow(index, row) {
      //编辑
      this.addclass = true;
      this.editclass = true;
      //   console.log(index, row);
      this.edituser.user_id = row.id;
      let res = await this.$store.dispatch("user_select_type", "");
      //   console.log(res);
      if (!res.code) {
        this.options = res.data;
      }
    },
    async editsubimit() {
      let res = await this.$store.dispatch("add_pick_up", this.addform);
      if (!res.code) {
        this.$message({
          type: "success",
          message: "修改成功",
        });
        this.getlist();
        this.end();
      }
    },
    async deleteRow(index, row) {
      //删除
      let data = {
        pick_id: row.id,
      };
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteRowfn(data);
        })
        .catch(() => {});
    },
    async deleteRowfn(data) {
      let res = await this.$store.dispatch("delete_pick_up", data);
      if (!res.code) {
        this.$message({
          type: "success",
          message: "删除成功",
        });
        this.getlist();
      }
    },
    add_class() {
      this.addclass = true;
    },
    async addsubimit() {
      //提交对应的内容
      //   console.log(this.addform);
      let res = await this.$store.dispatch("add_pick_up", this.addform);
      if (res.code == 0) {
        this.addclass = false;
        this.$message({
          type: "success",
          message: "创建成功",
        });
        this.getlist();
        this.addform.name = "";
        this.addform.address = "";
      }
    },
    async ship(index, row) {
      this.dialogFormVisible = true;
      this.logistics.order_id = row.order_id;

      this.post_id = row.id;
    },
    async shipu() {
      let data = {
        order_id: this.post_id,
        logistics: this.logistics.logistics,
        user_photo: this.logistics.user_photo,
        logistics_num: this.logistics._number, //快递单号
      };
      let res = await this.$store.dispatch("order_ship", data);
      console.log(res);
      if (!res.code) {
        this.$message({
          type: "success",
          message: "操作成功！",
        });
        this.dialogFormVisible = false;
      }
    },
    end() {
      this.addclass = false;
      this.cotent_list = [];
      this.editclass = false;
      this.getlist();
      // this.logistics.logistics = "";
      // this.logistics.logistics_num = "";
      // this.logistics._number = "";
      this.edituser = {
        type: "",
        user_id: "",
      };
      //   this.addform.name = "";
      //   this.addform.address = "";
    },
  },
};
</script>
<style lang='scss'>
.forms {
  text-align: left;
}
.com_list {
  background-color: #f8f8f8;
  padding: 4px;
  .rs {
    text-align: left;
    .item {
      padding: 8px 2px;
    }
  }
  .imgs {
    width: 60px;
    height: 70px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.order_detail {
  .el-dialog__body {
    // display: inline-block;
    padding: 0;
    min-height: 550px;
  }
}
.order_title {
  text-align: left;
  padding: 6px 2px;
}
</style>